<template recyclable>
    <div class="card" >
        <image v-if="itemValue.ex.image" :src="itemValue.ex.image" class="test-img"></image>
        <div class="test-desc">
            <text class="test-title">{{itemValue.ex.name}}</text>
            <text class="desc">{{itemValue.ex.desc}}</text>
            <div class="bottom">
                <text class="test-count">{{itemValue.ex.count}}人已测</text>
                <div class="test-button" v-if="itemValue.ex.is" @click="onCardClick"><text class="text-font">查看结果</text></div>
                <div class="test-button" v-else @click="onCardClick"><text class="text-font">开始测评</text></div>
            </div>
        </div>

    </div>
</template>

<script>
  export default {
    props: {
      itemValue: {
        type: Object, default: () => {
          return {ex:{}}
        }
      },
      itemIndex: {type: Number, default: -1},
      onItemClick:{type:Function}
    },
    components: {},
    methods: {
      onCardClick() {
        this.onItemClick && this.onItemClick(this.itemIndex);
      }
    },
    data() {
      return {}
    },
  }
</script>
<style lang="sass" > @import '../../config/styles.scss'</style>
<style scoped >
    @import '../../config/styles.scss';
    .card{
        padding: 20px;
        width:750px;
        background-color:#ffffff;
        flex-direction: row;
        justify-content: space-between;
    }
    .card:hover{
        background-color:#EEEEEE;
    }
    .test-img {
        margin:20px;
        width: 200px;
        height: 200px;
    }
    .bottom{
        margin-top: 20px;
        margin-bottom: 10px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    ,right{
         margin-right: 10px;
     }
     .test-desc{
         width: 450px;
     }
    .test-title{
        font-size:30px;
        color:#434A54 ;
        margin-top: 10px;
        margin-bottom: 20px;
    }
    .desc{
        height:80px;
        color:#999999;
        font-size:24px;
        overflow : hidden;
        margin-bottom: 20px;
    }
    .test-count{
        font-size:24px;
        color:#00BB9A;
    }
    .test-button{
        width:208px;
        height:60px;
        background-color:#00BB9A;
        border-radius:38px;
        justify-content: center;
        align-content: center;
    }
    .text-font{
        color:#ffffff;
        text-align:center;
    }
</style>
